<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动管理</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: auto; padding: 20px; }
        h1 { text-align: center; }
        #activity-form { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        label { display: block; margin-top: 10px; }
        input[type="text"] { width: 100%; padding: 5px; margin-top: 5px; margin-bottom: 10px; }
        button { margin-right: 10px; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入全局样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 HTML 放在每个页面顶部 -->
<nav class="navbar">
    <a href="index.html">社团管理</a>
    <a href="members.html">成员管理</a>
    <a href="memberships.html">成员关系管理</a>
    <a href="activities.html">活动管理</a>
    <a href="departments.html">部门管理</a>
</nav>

<h1>活动管理</h1>

<!-- 新增/编辑活动的表单 -->
<div id="activity-form">
    <h2 id="form-title">新增活动</h2>
    <input type="hidden" id="activity-id">
    <label for="activity-name">活动名称:</label>
    <input type="text" id="activity-name" required>
    <label for="activity-description">描述:</label>
    <input type="text" id="activity-description">
    <label for="activity-location">地点:</label>
    <input type="text" id="activity-location">
    <label for="activity-start-date">开始日期:</label>
    <input type="text" id="activity-start-date" placeholder="YYYY-MM-DD">
    <label for="activity-end-date">结束日期:</label>
    <input type="text" id="activity-end-date" placeholder="YYYY-MM-DD">
    <button onclick="handleSubmit()">提交</button>
    <button onclick="clearForm()">取消</button>
</div>

<!-- 活动列表 -->
<h2>活动列表</h2>
<table id="activity-table" border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>描述</th>
        <th>地点</th>
        <th>开始日期</th>
        <th>结束日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="activity-table-body"></tbody>
</table>

<script>
    const api = axios.create({
        baseURL: 'http://localhost:8080', // 替换为后端 API 的实际 URL
        headers: { 'Content-Type': 'application/json' }
    });

    document.addEventListener('DOMContentLoaded', fetchActivities);

    function fetchActivities() {
        api.get('/activities')
            .then(response => {
                const activities = response.data.data;
                const tbody = document.getElementById('activity-table-body');
                tbody.innerHTML = '';

                activities.forEach(activity => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
              <td>${activity.activityId}</td>
              <td>${activity.name}</td>
              <td>${activity.description}</td>
              <td>${activity.location}</td>
              <td>${activity.startDate.split("T")[0]}</td>
              <td>${activity.endDate || ''}</td>
              <td>
                <button onclick="editActivity(${activity.activityId})">编辑</button>
                <button onclick="deleteActivity(${activity.activityId})">删除</button>
              </td>
            `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => console.error('获取活动列表失败', error));
    }

    function handleSubmit() {
        const activityId = document.getElementById('activity-id').value;
        const name = document.getElementById('activity-name').value;
        const description = document.getElementById('activity-description').value;
        const location = document.getElementById('activity-location').value;
        const startDate = document.getElementById('activity-start-date').value;
        const endDate = document.getElementById('activity-end-date').value;
        const activity = { name, description, location, startDate, endDate };

        if (activityId) {
            api.put(`/activities/${activityId}`, activity)
                .then(() => {
                    alert('活动更新成功');
                    fetchActivities();
                    clearForm();
                })
                .catch(error => console.error('更新活动失败', error));
        } else {
            api.post('/activities', activity)
                .then(() => {
                    alert('活动创建成功');
                    fetchActivities();
                    clearForm();
                })
                .catch(error => console.error('创建活动失败', error));
        }
    }

    function editActivity(activityId) {
        api.get(`/activities/${activityId}`)
            .then(response => {
                const activity = response.data.data;
                document.getElementById('activity-id').value = activity.activityId;
                document.getElementById('activity-name').value = activity.name;
                document.getElementById('activity-description').value = activity.description;
                document.getElementById('activity-location').value = activity.location;
                document.getElementById('activity-start-date').value = activity.startDate;
                document.getElementById('activity-end-date').value = activity.endDate || '';
                document.getElementById('form-title').innerText = '编辑活动';
            })
            .catch(error => console.error('获取活动失败', error));
    }

    function deleteActivity(activityId) {
        if (confirm('确定要删除该活动吗？')) {
            api.delete(`/activities/${activityId}`)
                .then(() => {
                    alert('活动删除成功');
                    fetchActivities();
                })
                .catch(error => console.error('删除活动失败', error));
        }
    }

    function clearForm() {
        document.getElementById('activity-id').value = '';
        document.getElementById('activity-name').value = '';
        document.getElementById('activity-description').value = '';
        document.getElementById('activity-location').value = '';
        document.getElementById('activity-start-date').value = '';
        document.getElementById('activity-end-date').value = '';
        document.getElementById('form-title').innerText = '新增活动';
    }
</script>
</body>
</html>